<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#a1{
			border: 1px solid #000000;
			height: 600px;
			background: url(img/reg-mobile.jpg) no-repeat;
			
		}
		div h3{
			border: 1px solid #000000;
			width: 130px;
			height: 50px;
			position: relative;
			left: 540px;
			bottom: 42px;
			color: white;
			background-color: #2361B4;
			flex-direction: column;
			text-align: center;
			line-height: 50px;
		}
			h2{
				border: 1px solid #000000;
				width: 130px;
				height: 50px;
				color: #2396DB;
				flex-direction: column;
				text-align: center;
				line-height: 50px;
				position: relative;
				left: 400px;
				top: 30px;
				background-color: white;
				
			}
			#a2{
				border: 0 solid #FFFFFF;
				height: 450px;
				width: 550px;
				margin-top: 20px;
				position: relative;
				left: 400px;
				bottom: 60px;
				padding-left: 30px;
				padding-top: 30px;
				background-color: #FFFFFF;
			}
			#a3{
				border: 1px solid black;
				border-left: dashed;
				border-width:0px 0px 0px 1px;
				height: 450px;
				width: 250px;
				background-color: #FFFFFF;
				
				display: flex;
				position: relative;
				left: 550px;
				bottom: 255px;
				padding-left: 30px;
				padding-top: 30px;
			}
			.b1 img{
				vertical-align: middle;
			}
			.b2 img{
				vertical-align: middle;
			}
			.b3 img{
				vertical-align: middle;
			}
			.b3{
				font-size: 12px;
				color: rgba(0,0,0,0.4);
			}
			.b4{
				border: 0 solid black;
				width: 150px;
				height: 30px;
				position: relative;
				left: 100px;
				top: 15px;
			}
			.b4 a{
				color: #00FFFF;
			}
			.b5{
				border: 1px solid black;
				border-radius: 10px 10px 10px 10px;
				width: 150px;
				height: 30px;
				background-color: #2361B4;
				line-height: 30px;
				text-indent: 10px;
				position: relative;
				left: 100px;
				top: 80px;
				color: white;
			}
			.b5 a{
				text-decoration: none
			}
			.b6{
				border: 1px solid black;
				border-radius: 10px 10px 10px 10px;
				width: 200px;
				height: 50px;
				background-color: #2361B4;
				line-height: 30px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="a1">
			<h2>手机注册</h2>
			<h3>邮箱注册</h3>
			<div id="a2">
				<form action="" method="post">
					<p class="b1">
						<img src="img/login-input4.png" ><input type="text" class="" name="name" placeholder="请输入您的常用手机号" />
					</p>
					<p  class="b2">
						<img src="img/login-input3.png" ><input type="password" class="" name="password"  placeholder="六位短信验证码"/>
					</p>
					<p class="b3">
						<img src="img/login-input2.png" ><input type="text" class="" value="" name="mima" placeholder="请输入密码"/>6-16字符或数字，字母区分大小写
					</p>
					
					<p class="b4">
						<input type="checkbox" name="tongyi" />同意<a href="">用户服务条款</a>
					</p>
					<p class="" >
						<input type="button" class="b5" name="" value="注册"/>
					</p>
					<div id="a3">
						<p class="">
							<input type="button" class="b6" name="" value="已有账号马上登录"/>
						</p>
					</div>
				</form>
			</div>
			
		</div>
	</body>
</html>
